<template>
    <!-- 首页头部 -->
    <view class="contanier" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
        <!-- 小程序标题 后续会更改 -->
        <view class="title">
            <text>八股刷题小程序</text>
        </view>
        <!-- 搜索框 -->
        <view class="search" @tap="goSearch">
            <text class="iconfont icon-sousuo"></text>
            <text class="place-holder">搜索</text>
        </view>
    </view>
</template>
<script setup lang="ts">
import CustomSearch from '@/components/CustomSearch.vue';
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync();
// console.log(safeAreaInsets);
const goSearch = () => {
    uni.navigateTo({ url: '/index_modules/search/search' })
}
</script>
<style scoped lang="scss">
.contanier {
    background-color: $color-main;
    padding: 30rpx 40rpx;

    .title {
        margin: 32rpx 0;
        color: #fff;
        font-weight: 500;
        font-size: 50rpx;
    }

    .search {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10rpx 0 26rpx;
        height: 64rpx;
        color: #fff;
        font-size: 28rpx;
        border-radius: 32rpx;
        background-color: rgba(255, 255, 255, 0.5);

        .place-holder {
            border-left: 1rpx solid #fff;
            padding: 0 15rpx;
        }
    }
}
</style>
